import React, { useState } from 'react';
import './index.css'
import Whith from '../../hooks/Whith';
import i18n from '../../i18n/i18n';
import { useTranslation } from 'react-i18next';
import { Breadcrumb, Layout, Menu, theme,Button } from 'antd';
import { NavLink, Outlet } from 'react-router-dom';
import { routerHomes } from '../../router';
import { useNavigate } from 'react-router-dom';

const { Header, Content, Footer, Sider } = Layout;
function getItem(label, key, icon, children) {
  return {
    key,
    icon,
    children,
    label,
  };
}

const App = () => {
    const { t, i18n } = useTranslation();
    const nav=useNavigate()
    const romeHome=(arr)=>{
        
const items=[]
arr&&arr.forEach((item,index)=>{
    if(item.children){
        items.push(getItem(<NavLink to={`${item.path}?title=${item.title}`}>{item.title}</NavLink>,item.path,item.icon,romeHome(item.children)))
    }else{
        items.push(getItem(<NavLink to={`${item.path}?title=${item.title}`}>{item.title}</NavLink>,item.path,item.icon))
    }
   
})
return items
    }
    
    const items=romeHome(routerHomes)
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  const tc=()=>{
    localStorage.removeItem('token')
    nav('/login')
  }
  const qh=()=>{
    i18n.changeLanguage(i18n.language==='en'?'zh':'en')
  }
  return (
    
    <Layout style={{ minHeight: '100vh' }}>
       
      <Sider collapsible collapsed={collapsed} onCollapse={value => setCollapsed(value)}>
        <div className="demo-logo-vertical" />
        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} />
      </Sider>
      <Layout>
        <Header style={{ padding: 0, background: colorBgContainer }} >
        <h1 style={{float:'left'}}>{t('name')}</h1>
            <Button onClick={qh}>国际化切换</Button>
        <Button style={{float:'right',marginTop:'30px',background:'blue',color:'white'}} onClick={tc}>退出</Button>
           <p style={{float:'right'}}> 欢迎 {localStorage.getItem('icon')} 登录</p>
           
        </Header>
        <Content style={{ margin: '0 16px' }}>
          <Breadcrumb style={{ margin: '16px 0' }}>
        
          </Breadcrumb>
          <div
            style={{
              padding: 24,
              minHeight: 360,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
           <Outlet></Outlet>
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>
          Ant Design ©{new Date().getFullYear()} Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
  );
};
export default Whith(App);